<template>
	<!-- 服务介绍 -->
	<view class="notice-list">
		<div style="padding:20rpx 40rpx;background-color: white;">
			<input class="set_inupt" v-model="val" type="text" @click="getByinput" placeholder="搜索标题" disabled />
		</div>
		<div style="padding: 40rpx;">
			<view v-for="notice in notices" :key="notice.id" class="notice-item" @click="xXNR(notice.id)">
				<div class="notice-title">{{ notice.title }}</div>
				<div>
					<image :src="url()+notice.image" class="notice-image"></image>
					<div style="float: right;width: 54%;">
						<text class="notice-content">{{ notice.content }}</text>
					</div>
				</div>
				<text class="notice-date">{{ notice.date }}</text>
			</view>
		</div>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		gonavigateTo,
		getdate
	} from '@/request/wx.js';
	import {
		onLoad,
		onShow
	}
	from '@dcloudio/uni-app';
	import {
		rankstate,
		showstate,
		url
	} from '@/request/api.js'
	const val = ref('')
	onShow(async () => {
		// 从本地存储中获取名为'result'的数据
		const result = uni.getStorageSync('result');
		val.value = result;

		// 构建data对象，无论result是否为空都包含"type": "最新动态"
		const data = {
			"type": "服务介绍",
			'result': result || '' // 如果result为空，则使用空字符串
		};

		// 调用rank函数并等待其完成
		const response = await rankstate(data);
		show(response);

		// 不管result是否为空，都从本地存储中删除'result'数据
		uni.removeStorageSync('result');

		// 如果result为空，打印提示信息
		if (!result) {
			console.log('输入为空');
		}

		// 输出result的值，用于调试
		console.log(result);
	});
	const notices = ref([]);

	function show(data) {
		console.error("data:", data);
		notices.value = data.data.data.map(item => {
			return {
				id: item.id,
				image: item.cover,
				title: item.title,
				content: item.introduce,
				date: getdate(item.date) // 使用格式化后的日期
			};
		});
	}
	const getByinput = () => {
		console.log("搜索")
		gonavigateTo(`/pages/user/seek/seek?tid=${1}&tv=${1}`);
	}
	const xXNR = (event) => {
		console.log(`按钮被点击了：${event}`);
		gonavigateTo(`/pages/user/index/xxnr?id=${event}`);
	}
</script>

<style scoped>
	.set_inupt {
		height: 68rpx;
		width: 94%;
		padding-left: 20px;
		border-radius: 16rpx;
		background-color: #efefef;
	}

	.notice-list {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		background-color: #efefef;
	}

	.notice-item {
		margin-bottom: 20rpx;
		height: 190px;
		border-radius: 22rpx;
		background-color: white;
		padding: 0px 20px;
	}

	.notice-image {
		width: 250rpx;
		height: 160rpx;
		margin-bottom: 10px;
	}

	.notice-title {
		padding: 20px 0px;
		font-weight: bold;
		font-size: 18px;
	}

	.notice-content {
		color: #666;
		font-size: 14px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
	}

	.notice-date {
		color: #999;
		font-size: 13px;
	}
</style>